<script setup>
import MyTable from "@/components/constant/myTable.vue";
import {delProject, updateProject, getProjectList, addProject} from "@/api/httpApi/projectApi.js";
import {checkCaptchaCode} from "@/api/httpApi/userApi.js";
import {constantStore} from "@/stores/constantStore.js";

let shopMapping = [
  {
    label: "ID",
    prop: "id",
    propConfig: {
      align: "center",
      width: "180",
      type: "text",
    },
  },
  {
    label: "商城名称",//表头名称 必填
    prop: "name",//数据对应字段 必填
    propConfig: {
      align: "center",//对齐方式 非必填 不写默认左对齐
      type: "text",// 非必填 不写默认text   text(文本) selectText(根据给定列表，选择内容)  tag(标签)  Switch(开关)  image(图片)
      fixed: 'left',//固定列的位置
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      editProp: "name",// 编辑框的数据字段名称  非必填 不写默认用prop
      labelWidth: "100",
      required: true,//是否必传，默认false
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text",
      rules: []//构建默认的校验规则
    }
  },
  {
    label: "描 述",
    prop: "description",
    propConfig: {
      align: "center",
      width: "200",
      type: "text",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "textarea"
    }
  },
  {
    label: "steam直连前缀",
    prop: "link",
    propConfig: {
      align: "center",
      width: "200",
      type: "text",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text"
    }
  },
  {
    label: "分类图片",
    prop: "image",
    propConfig: {
      align: "center",
      width: "200",
      type: "image",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "image", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      imageConfig: {
        shape: "square", // square circle
        radius: 0,
        size: "",//单位PX 有size配置，  width 和height 将会失效 且 shape等于circle，仅仅会生效此属性
        width: 300,//单位PX
        height: 200,//单位PX
        fit: "cover", //图片如何适应到容器框，同原生 object-fit。  'fill', 'contain', 'cover', 'none', 'scale-down',
        lazy: true,
        alt: "热门图标",
      },
      cropperConfig: {
        canScale: true,//图片是否允许滚轮缩放 默认true
        autoCrop: true,//是否默认生成截图框 默认false
        fixed: false,//是否开启截图框宽高固定比例 默认false
        fixedNumber: [1, 1],//截图框的宽高比例, 开启fixed生效 默认[1, 1]  ([ 宽度 , 高度 ])
        full: false,//是否输出原图比例的截图, 默认false
        canMove: true,//上传图片是否可以移动, 默认true
        canMoveBox: false,//截图框能否拖动, 默认true
        original: false,//上传图片按照原始比例渲染, 默认false
        centerBox: false,//截图框是否被限制在图片里面 默认false
        high: true,//是否按照设备的dpr输出等比例图片 默认true
        infoTrue: false,//true 为展示真实输出图片宽高 默认false 展示看到的截图框宽高
        fixedBox: true,//固定截图框大小, 不允许改变 默认false false
      },
    }
  },
  {
    label: "热门图标",
    prop: "iconImage",
    propConfig: {
      align: "center",
      width: "200",
      type: "text",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "image", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      imageConfig: {
        shape: "square", // square circle
        size: 80,
        alt: "热门图标",
      },
      cropperConfig: {canMoveBox: false},
    }
  },
  {
    label: "是否展示",
    prop: "show",
    propConfig: {
      align: "center",
      width: "120",
      type: "switch",
      modelAction: (val) => {  //选择按钮的切换函数
        return checkCaptchaCode(val)
      },
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "select", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      option: constantStore().stateOption,//选择框选项
    },
  },
  {
    label: "是否打开",
    prop: "open",
    propConfig: {
      align: "center",
      width: "120",
      type: "switch",
      modelAction: (val) => {  //选择按钮的切换函数
        return checkCaptchaCode(val)
      },
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      editType: "select", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      labelWidth: "100",
      option: constantStore().stateOption,//选择框选项
    },
  },
  {
    label: "创建时间",
    prop: "createTime",
    propConfig: {
      align: "center",
      width: "200",
      type: "text",
    },
  },
  {
    label: "最近修改时间",
    prop: "updateTime",
    propConfig: {
      align: "center",
      width: "200",
      type: "text",
    },
  },
  {
    label: "备 注",
    prop: "remarks",
    propConfig: {
      align: "center",
      width: "400",
      type: "text",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text",
      require: true,
      labelWidth: "100"
    },
  },
]

</script>

<template>
  <div class="shop-type-box">
    <div class="shop-button-box">

    </div>
    <div class="shop-content-box">
      <my-table :initAction="() => { return getProjectList()}"
                :update-action="(shop) => { return updateProject(shop)}"
                :add-action="(shop) => { return addProject(shop)}"
                :delAction="(ids) => { return delProject(ids)}"
                title="商城"
                :mapping="shopMapping"/>
    </div>

  </div>
</template>

<style scoped lang="scss">

</style>